import { PropsWithChildren, FC, useRef } from "react";
import { useState, useContext } from "react";
import SubmitModal from "./SubmitModal.tsx";
import { Input, message } from "antd";
import { rejectFriend, comfirmFriends } from "@/api/xhr/friends/index.ts";
import FriendInfo from "./FriendInfo.tsx";
import { useSelector } from "react-redux";
import Context from "../context.tsx";
type FriendType = {
  id: number;
  name: string;
  commentInfo: string;
  avatar: string;
};
const FriendApply: FC<
  PropsWithChildren<{
    friendlist: FriendType[];
    setaplyfriendlist: (data: FriendType[]) => void;
  }>
> = props => {
  const [showInfo, setShowInfo] = useState<boolean>(false);
  const [commendName, setCommendInfo] = useState<string>("");
  const contextData = useContext(Context);
  const userDatainfoInfo = useRef();
  const userinfo = useSelector((state: any) => state.user.userinfo);
  function comfirm(datainfo: any) {
    setShowInfo(true);
    userDatainfoInfo.current = datainfo;
  }
  async function ToComfirm(data: FriendType & { commendName: string }) {
    const res = await comfirmFriends({
      userId: data.id,
      friendUserId: userinfo.id,
      commendName
    });
    if (res.statusCode == 200) {
      message.success("添加成功");
      props.setaplyfriendlist(
        props.friendlist.filter(item => item.id !== data.id)
      );
      contextData.getFriendList();
    } else {
      message.error(res.errorInfo);
    }
    setCommendInfo("");
    setShowInfo(false);
  }
  async function reject(item: FriendType) {
    const res = await rejectFriend({
      userId: item.id,
      friendUserId: userinfo.id
    });
    if (res.statusCode == 200) {
      props.setaplyfriendlist(
        props.friendlist.filter((data: FriendType) => data.id != item.id)
      );
      message.success("操作成功");
    }
  }
  return (
    <>
      <div className="overflow-y-scroll scrollbar-hide h-full w-full scrollbar select-none cursor-auto flex flex-col">
        <div className="mt-2 border-b-2 border-dashed "></div>
        <div className="flex-1 flex flex-wrap max-h-[295px] p-3">
          {props.friendlist.map(item => {
            return (
              <FriendInfo
                key={item.id}
                avatarImg={item.avatar}
                userName={item.name}
                message={item.commentInfo}
              >
                <div className="text-xs">
                  <span
                    className="mr-1 text-sky-300"
                    onClick={() => comfirm(item)}
                  >
                    接受
                  </span>
                  <span className="text-pink-300" onClick={() => reject(item)}>
                    拒绝
                  </span>
                </div>
              </FriendInfo>
            );
          })}
        </div>
      </div>
      <SubmitModal
        show={showInfo}
        changeshow={setShowInfo}
        SubmitFrom={() => {
          ToComfirm({
            ...(userDatainfoInfo.current as unknown as FriendType),
            commendName: commendName
          });
        }}
        subLoading={false}
      >
        <div className="flex justify-center items-center w-full mt-1">
          <div className="w-10 mr-1">备注:</div>
          <Input
            placeholder="填写备注信息"
            value={commendName}
            onChange={e => setCommendInfo(e.target.value)}
          />
        </div>
      </SubmitModal>
    </>
  );
};

export default FriendApply;
